<!-- 权限列表 -->
<template>
  <div class="system-role-box">
    <div class="content">
      <el-table :data="scopeList" style="width: 100%">
        <el-table-column label="#" width="100" type="index"></el-table-column>
        <el-table-column label="角色昵称" width="160">
          <template slot-scope="scope">
            <span>{{ scope.row.role_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="角色ID" width="130">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="角色描述" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.desc?scope.row.desc:'暂无描述' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="添加时间" width="220">
          <template slot-scope="scope">
            <span>{{ scope.row.add_time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="scopeEdit(scope.$index, scope.row)">编辑权限</el-button>        
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scopeList: []
    };
  },
  created () {
    this.$http.getRoleList().then(res => {
      // console.log(res)
      if (res && res.data.code == 200) {
        this.scopeList = res.data.data

      }    
    })
  },
  methods: {
    scopeEdit(index,item) {
      this.$router.push("/dashboard/system/scope/edit/"+item.id);
    }
  }
};
</script>

<style scoped lang="less">
.system-role-box {
  background: #fff;
  border-radius: 2px;
  .header {
    border-bottom: 1px solid #f6f6f6;
    button {
      margin: 20px 0px 10px 15px;
    }
  }
  .content {
    padding: 0 20px;
    .body {
      margin: 8px 0;
    }
  }
  .el-pagination {
    padding: 20px 0px 25px 15px;
    // text-align: center;
  }
}
</style>
